<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80">
			<el-form-item label="频道" prop="id">
				<el-input
						v-model="queryParams.channelName"
						placeholder="请输入频道名称"
						clearable
						@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="创建时间">
				<el-date-picker
					v-model="dateRange"
					style="width: 240px"
					value-format="yyyy-MM-dd"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 工具栏 -->
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['btn.ArticleChannel.add']"
				>新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['btn.ArticleChannel.remove']"
				>删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['btn.ArticleChannel.export']"
				>导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>
		<!-- 表单组件 -->
		<el-table v-loading="loading" :data="articleChannelList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column v-if="false" label="频道ID" align="center" prop="id" />
			<el-table-column label="频道名称" align="center" prop="channelName" />
			<el-table-column label="频道序号" align="center" prop="channelNum" />
			<el-table-column label="创建人" align="center" prop="username" />
			<el-table-column label="上传时间" align="center" prop="createDate" />
			<el-table-column label="修改时间" align="center" prop="changeDate" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['btn.ArticleChannel.update']"
					>修改</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['btn.ArticleChannel.remove']"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页组件 -->
		<el-pagination :current-page="queryParams.current" :total="total" :page-size="queryParams.size" style="padding: 30px 0; text-align: center;"
			layout="total, prev, pager, next, jumper" @current-change="getList" />
		<!-- 添加或修改ArticleChannel对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="频道ID" prop="id">
					<el-input :disabled="true" v-model="form.id" placeholder="请输入频道ID" />
				</el-form-item>
				<el-form-item label="频道名称" prop="channelName">
					<el-input v-model="form.channelName" placeholder="请输入频道名称" />
				</el-form-item>
				<el-form-item label="频道序号" prop="channelNum">
					<el-input :disabled="true" v-model="form.channelNum" placeholder="请输入频道序号" />
				</el-form-item>
				<el-form-item label="创建人" prop="username">
					<el-input :disabled="true" v-model="form.username" placeholder="请输入创建人" />
				</el-form-item>
				<el-form-item label="上传时间" prop="createDate">
					<el-input :disabled="true" v-model="form.createDate" placeholder="请输入上传时间" />
				</el-form-item>
				<el-form-item label="修改时间" prop="changeDate">
					<el-input :disabled="true" v-model="form.changeDate" placeholder="请输入修改时间" />
				</el-form-item>

				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<!-- js脚本 -->
<script>
import {getMaxNo, delArticleChannelById, addArticleChannel, updateArticleChannelById, getArticleChannelById,loadDataList } from "@/api/pcwl/articleChannel";
export default {
	name: "ArticleChannel",
	dicts: ['sys_normal_disable'],
	data() {
		return {
      maxNo: 0,
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 岗位表格数据
			articleChannelList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 日期范围
			dateRange: [],
			// 查询参数
			queryParams: {
				current: 1,
				size: 10,
				id: undefined,
				channelName: undefined,
				channelNum: undefined,
				username: undefined,
				createDate: undefined,
				changeDate: undefined,
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				id: [
					{  message: "频道ID不能为空", trigger: "blur" }
				],
				channelName: [
					{  message: "频道名称不能为空", trigger: "blur" }
				],
				username: [
					{  message: "创建人不能为空", trigger: "blur" }
				],
				createDate: [
					{  message: "上传时间不能为空", trigger: "blur" }
				],
				changeDate: [
					{  message: "修改时间不能为空", trigger: "blur" }
				],
			}
		};
	},
	created() {
		this.getList();
	},
	methods: {
		/** 查询文章分类频道列表 */
		getList(currentPage=1) {
			this.loading = true;
			this.queryParams.current=currentPage;
			// loadDataList(this.queryParams).then(response => {
			loadDataList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
				this.articleChannelList = response.data.records;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: undefined,
				channelName: undefined,
				channelNum: undefined,
				username: undefined,
				createDate: undefined,
				changeDate: undefined,
			};
			this.resetForm("form");
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.current = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.id)
			this.single = selection.length!=1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
      getMaxNo().then(response =>{
        this.maxNo=response.data;
        this.form.channelNum=this.maxNo+1;
        this.open = true;
      })
			this.title = "添加文章分类频道";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const articleChannelId = row.id || this.ids
			getArticleChannelById(articleChannelId).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = "修改文章分类频道";
			});
		},
		/** 提交按钮 */
		submitForm: function() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.id != undefined) {
						updateArticleChannelById(this.form,this.form.id).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					} else {
						addArticleChannel(this.form).then(response => {
							this.$modal.msgSuccess("新增成功");
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const articleChannelId = row.id || this.ids;
			this.$modal.confirm('是否确认删除文章分类频道编号为"' + id + '"的数据项？').then(function() {
				return delArticleChannelById(articleChannelId);
			}).then(() => {
				this.getList();
				this.$modal.msgSuccess("删除成功");
			}).catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download('articleChannel/export', {
				...this.queryParams
			}, `post_${new Date().getTime()}.xlsx`)
		}
	}
};
</script>
